<template>
  <div class="reply-card">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template v-for="item in list" :key="item.id">
        <div class="user">
          <reply-header
            :form-user="item.fromUser"
            :to-user="item.toUser"
            :time="item.updateTime"
          />
        </div>
        <div class="content" @click="onPushData(item)">{{ item.content }}</div>
        <van-divider />
      </template>
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { getReplys } from '../../../../service/comment'
import { replysRes } from '../../../../service/comment/types'
import ReplyHeader from './reply-header.vue'

const props = defineProps<{
  commentId: number
}>()
const emit = defineEmits<{
  (e: 'pushData', reply: replysRes.Reply): void
}>()
const list = ref<replysRes.Reply[]>([])
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)

const onPushData = (item: replysRes.Reply) => {
  emit('pushData', item)
}
const onLoad = async () => {
  const res = await getReplys(props.commentId, {
    offect: list.value.length,
    limit: 5
  })
  list.value.push(...res.data.replys)
  loading.value = false
  if (list.value.length >= res.data.totalCount) {
    finished.value = true
  }
}

watch(
  () => props.commentId,
  () => {
    list.value = []
    finished.value = false
  },
  { immediate: true }
)

defineExpose({
  list
})
</script>

<style lang="scss" scoped>
.reply-card {
  height: 70vh;
  .content {
    margin-left: 30px;
    font-size: 13px;
  }
  .content:last-child {
    margin-bottom: 20px;
  }
}
</style>
